<template>
  <Header title="生成订单"></Header>
  <div class="address-wrap" @click="goToAddressList">
    <div class="name">
      <span>老碧</span>
      <span>12323131211</span>
    </div>
    <div class="address">
      江西省 南昌市 南昌县 向塘 江西服装学院
    </div>
    <van-icon name="arrow" class="arrow" />
  </div>
  <div class="goods">
    <div class="goods-item" v-for="item in state.orderList" :key="cartItemId">
      <van-card :num="item.goodsCount" :price="item.sellingPrice" :title="item.goodsName" :thumb="item.goodsCoverImg" />
    </div>
  </div>
  <div class="pay-wrap">
    <div class="price">
      <span>商品金额</span>
      <span>￥ {{state.totalAmount}}</span>
    </div>
    <van-button type="primary" block>订单结算</van-button>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import Header from '../components/Header.vue'
import { useRoute, useRouter } from 'vue-router';  //操作url地址栏用不带r的
import { getOrderByCartItemId } from '../api/service/cart.js'

const state = reactive({
  orderList: [],
  totalAmount:''
})

const route = useRoute()
const router = useRouter()
//先把跳转路由的那个id接过来，再发接口请求
onMounted(() => {
  init()
})
const init = async () => {
  let params = []
  console.log(route.query.cartItemIds);
  //如果是字符串类型，就不用转
  if (typeof route.query.cartItemIds === 'string') {
    params = route.query.cartItemIds
  } else {//如果不是字符串就转化为字符串类型

    params = route.query.cartItemIds.join(',')
  }
  const { data } = await getOrderByCartItemId({ cartItemIds: params })
  state.orderList = data
  console.log(data);
  //计算总金额
  let totalAmount = data.reduce((prev, next) => {
    return prev + next.goodsCount * next.sellingPrice;
  }, 0);
  state.totalAmount=totalAmount
  console.log(totalAmount); 
}

const goToAddressList = () => {
  router.push({ path: '/address' })
}
</script>

<style lang="less" scoped>
.address-wrap {
  background: #fff;
  font-size: 14px;
  padding: 15px;
  color: #222333;
  margin-bottom: 20px;
  position: relative;

  .address,
  .name {
    margin: 10px 0;

  }

  .arrow {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%); //居中
    font-size: 20px;
  }

  &::after {
    content: ''; //为元素一定要有content
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 2px;
    background: repeating-linear-gradient(45deg, #ff6c6c 0, #ff6c6c 20%,
        transparent 0, transparent 25%,
        #1989fa 0, #1989fa 45%,
        transparent 0, transparent 50%,
      ); //重复的线性渐变
    background-size: 80px;

  }
}

.pay-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 10px 20px;
  border-top: 1px solid #e9e9e9;

  .price {
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;

    span:nth-child(2) {
      color: red;
    }
  }
}
</style>